<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <fieldset>
        <legend>实例1</legend>
        <div id="app">
            <span>A：</span>
            <input type="text" v-model:value="a" />
            <span>B：</span>
            <input type="text" v-model:value="b" />
            <div>
                <span>C.name：</span>
                <input type="text" v-model:value="c.name">
            </div>
            <div>
                <span>D.name：</span>
                <input type="text" v-model:value="d.e.f.age">
            </div>
            <div>
                <span>arry：</span>
                <input type="text" v-model:value="g[0]" v-on:click='click'>
            </div>
            <div>
                <span>project.arry：</span>
                <input type="text" v-model:value="f.h[0]">
            </div>
        </div>
    </fieldset>
    <script> 
        new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                c: {
                    name: ''
                },
                d: {
                    e: {
                        f: {
                            nage: ''
                        }
                    }
                },
                g: [],
                f: {
                    h: [1]
                }
            },
            watch: {
                //普通watch监听
                a: function (val, oldVal) {
                    console.log("newA：" + val, 'oldA：' + oldVal);
                },
                //通过方法名在methods内监听
                b: 'anothermethod',
                //对象深度监听
                c: {
                    handler: function (val, oldVal) {
                        console.log('newname：' + val, 'oldname：' + oldVal);
                    },
                    deep: true,
                    immediate: true
                },
                'c.name': {
                    handler: function (val, oldVal) {
                        console.log('newC：' + val, 'oldC：' + oldVal);
                    }
                },
                'd.e.f.age': {
                    handler: function (val, oldVal) {
                        console.log('newD：' + val, 'oldD：' + oldVal);
                    }
                },
                'g.0': {
                    handler: function (val, oldVal) {
                        console.log("newG：" + val, 'oldG：' + oldVal);
                    }
                },
                'f.h.0': {
                    handler: function (val, oldVal) {
                        console.log("newF：" + val, 'oldF：' + oldVal);
                    }
                }
            },
            methods: {
                anothermethod: function (val, oldVal) {
                    console.log("newB：" + val, 'oldB：' + oldVal);
                },
                click: function (event) {
                    alert(event.target.tagName)
                }
            }
        })
        //watch是一个对象是对象就有键有值，通过watch可以监测到data的数据变化，有三种监听方式
        //键是一个字符串，它是被观测的对象，如data中的某个变量
        //值还可以是一个函数，但不能使用箭头函数的形式，this会出现问题。如   a:function(val,oldval){.....} 函数包含两个参数第一个是当前值，第二个是变化后的值
        //值也可以是函数名：不过这个函数名要用单引号来包裹，并且在methods监听。如 a:'listena'
        /*值也可以是一个对象，其中包含回调函数可以其他一些选项,比如是否深度监听
          handler:其值是一个回调函数。即监听到变化时应该执行的函数
          deep:其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到）
          immediate：其值是true或false；确认是否以当前的初始值执行handler的函数，而非值改变后才执行。
        */

        var total = 0;
        var items = [
            {
                id: 336,
                title: '智利三文鱼扒500g酸甜口味爆炒',
                img: '../assets/images/test/8-1.jpg',
                count: 11,
            },
            {
                id: 337,
                title: '西班牙三文鱼扒500g酸甜口味爆炒',
                img: '../assets/images/test/8-1.jpg',
                count: 2,
            }
        ]


        items.forEach(function (numb) {
            total += numb.count
        })
        console.log(total)
    </script>
</body>

</html>